共同点

src 和 href 都是用于引用外部资源的属性

功能不同

src（source）：表示 "资源的来源"，用于将外部资源嵌入到当前文档中，替换自身所在的元素

href（hypertext reference）：表示 "超文本引用"，用于建立当前文档与外部资源之间的关联

加载机制不同

src 会暂停页面解析，直到资源加载、编译、执行完成（例如脚本、图片）

href 不会阻塞页面解析，它会并行下载资源，不影响当前文档的渲染

应用场景不同

1. src

<script src="script.js"></script>  <!-- 引入脚本 -->
<img src="image.jpg" alt="图片">   <!-- 引入图片 -->
<iframe src="page.html"></iframe>  <!-- 引入框架内容 -->
<video src="video.mp4"></video>    <!-- 引入视频 -->

1. href

<link href="style.css" rel="stylesheet">  <!-- 引入样式表 -->
<a href="page.html">链接</a>              <!-- 超链接 -->
<base href="/">                           <!-- 基准URL -->

总结

简单来说，src 是 "引入替换"，href 是 "关联引用"